<template>
	<Page title='表单验证' contentClass='p10'>
		<SubmitForm :config='submitConfig'/>
	</Page>
</template>

<script setup>
	const Page	= $.lazy(()=>import('#tp/content/page-content.vue'))
	const SubmitForm = $.lazy(()=>import('#cpt/form/submit-form.vue'))
	
	const submitConfig = {
		api: '/api', 						// 提交接口
		labelWidth: 's5',
		getNewParam: param => {
			delete param['pwd2']
			return param
		},
		onValid: ({ user }) => {
			if( !user ){
				return $fn.msg.error('用户名不能为空')
			}
		},
		data:({ formRef })=>[
			{ label:'用户名', name:'user', type:'text' },
			{ label:'密码', name:'pwd', type:'text', r:1 },
			{ label:'确认密码', name:'pwd2', type:'text', 
				rules: { 
					trigger: ['change','blur'], 
					// validator: async (rule, value)=> value === formRef.getValue('pwd') || !value ?  Promise.resolve() : Promise.reject('两次密码输入不一致') 
					validator: async (rule, value) => $fn.valid( value, { bool: value === formRef.getValue('pwd') || !value, msg: '两次密码输入不一致' } )
				},
			}
		]
	}
</script>